<template>
  <div class="container">
    <el-tabs
      v-model="activeName"
      :tab-position="tabPosition"
      @tab-click="tabTwohandleClick"
    >
      <el-tab-pane label="产品实例信息" name="proInstanceInfo">
        <DicTable
          stripe
          class="m-table"
          align="center"
          border="full"
          :columnData="proStrengthTableColumns"
          :tableData="proStrengthTableData"
          :loading="proStrengthTableLoading"
          :currentPage="proStrengthTablePage.page"
          :pageSize="proStrengthTablePage.pageSize"
          :totalResult="proStrengthTablePage.rowCount"
          :pager="true"
          @on-page-change="proStrengthHandlePageChange"
        >
        </DicTable>
      </el-tab-pane>
      <el-tab-pane label="订单信息" name="orderInfo">
        <div>
          <el-tabs
            :tab-position="tabPosition"
            v-model="orderInfoActiveName"
            @tab-click="orderInfohandleClick"
          >
            <el-tab-pane label="项目信息" name="projectInfor">
              <DicTable
                ref="projectInfortable"
                class="m-table"
                align="center"
                border="full"
                stripe
                :columnData="projectInforTableColumns"
                :tableData="projectInforTableData"
                :loading="projectInforTableLoading"
                :currentPage="projectInforTablePage.pageIndex"
                :pageSize="projectInforTablePage.pageSize"
                :pager="true"
                :totalResult="projectInforTablePage.rowCount"
                @on-page-change="projectInforhHandlePageChange"
              >
                <template #custSoNumber="{ row }">
                  <el-button type="text" @click="salesGoodHandel(row)">{{
                    row.custSoNumber
                  }}</el-button>
                </template>
              </DicTable>
            </el-tab-pane>
            <el-tab-pane
              label="销售品信息"
              v-if="salesGoodSShow"
              name="salesGoods"
            >
              <DicTable
                ref="projectInfortable"
                class="m-table"
                align="center"
                border="full"
                stripe
                :columnData="salesGoodsTableColumns"
                :tableData="salesGoodsTableData"
                :loading="salesGoodsTableLoading"
                :currentPage="salesGoodsTablePage.pageIndex"
                :pageSize="salesGoodsTablePage.pageSize"
                :pager="true"
                :totalResult="salesGoodsTablePage.rowCount"
                @on-page-change="salesGoodshHandlePageChange"
              >
                <template #custSoNumber="{ row }">
                  <el-button type="text" @click="goToSalesDetailHandel(row)">{{
                    row.custSoNumber
                  }}</el-button>
                </template>
              </DicTable>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DicTable from "@/components/public/DicTable";
import CustomerInfoManageServer from "@/api/customer/CustomerInfoManageServer";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    DicTable,
  },
  // 这里存放数据
  data() {
    return {
      activeName: "proInstanceInfo",
      orderInfoActiveName: "projectInfor",
      tabPosition: "top",
      // 销售品信息-接口
      salesGoodSShow: false,
      //  销售品实例信息表格
      proStrengthTableColumns: [
        { field: "custSoNumber", title: "流水号", width: 300, fixed: "left" },
        { slotName: "custName", title: "客户名称", width: 300, fixed: "left" },
        { field: "offerName", title: " 销售品名称", width: 300 },
        { field: "statusCdName", title: "状态", width: 300 },
        { field: "regionRange", title: "通达地点", width: 300 },
        { field: "handleOrgName", title: "发起局", width: 300 },
        { field: "firstFinishDate", title: "开通日期", width: 300 },
        { field: "beginRentDate", title: "起租日期", width: 300 },
        { field: "stopRentDate", title: "退租日期", width: 300 },
        { field: "rate", title: "速率", width: 300 },
        { field: "accNum", title: "设备号", width: 300 },
        { field: "busiManagerName", title: "业务经理", width: 300 },
        { field: "prodInstName", title: "甲端用户名称", width: 300 },
        { field: "addressDesc", title: "甲端装机地址", width: 300 },
        { field: "zProdInstName", title: "乙端用户名称", width: 300 },
        { field: "zAddressDesc", title: "乙端装机地址", width: 300 },
      ],
      proStrengthTableData: [],
      proStrengthTableLoading: false,
      proStrengthTablePage: {
        pageIndex: 1,
        pageSize: 10,
        totalResult: 8,
        rowCount: 0,
      },
      // 订单信息-项目信息表格
      projectInforTableColumns: [
        { slotName: "custSoNumber", title: "流水号", width: 200 },
        { field: "oldPartyCode", title: "客户编码", width: 200 },
        { field: "custName", title: "客户名称", width: 200 },
        { field: "custOrderTypeName", title: "单据类型", width: 100 },
        { field: "audState", title: "审核状态", width: 100 },
        { field: "orderStateCdName", title: "单据阶段", width: 100 },
        { field: "acceptDate", title: "受理日期", width: 200 },
        { field: "audDate", title: "审核日期", width: 200 },
        { field: "custManagerName", title: "客户经理", width: 200 },
        { field: "custManagerPhone", title: "客户经理联系电话", width: 200 },
        { field: "audFirstName", title: "业务经理", width: 200 },
        { field: "busiManagerPhone", title: "业务经理联系电话", width: 200 },
        { field: "custOrderTypeName3", title: "受理运营商", width: 200 },
        { field: "projectId", title: "项目编号", width: 200 },
        { field: "staffName", title: "发起人", width: 200 },
        { field: "orgName", title: "发起局", width: 200 },
      ],
      projectInforTableData: [],
      projectInforTableLoading: false,
      projectInforTablePage: {
        pageIndex: 1,
        pageSize: 5,
        rowCount: 0,
        totalResult: 8,
      },
      // 订单信息-销售品信息
      salesGoodsTableColumns: [
        { slotName: "custSoNumber", title: "流水号", width: 200 },
        { field: "offerName", title: "销售品名称", width: 200 },
        { field: "reqOrderDate", title: "需求单完成时间", width: 200 },
        { field: "orderDate", title: "订单要求完成时间", width: 100 },
        { field: "serviceOfferName", title: "登记事项", width: 100 },
        { field: "regionRange", title: "通达地点", width: 100 },
        { field: "accNum", title: "设备号", width: 200 },
        { field: "busiManagerName", title: "业务经理", width: 200 },
        { field: "userCustName", title: "甲端用户名称", width: 200 },
        { field: "contactName", title: "甲端联系人", width: 200 },
        { field: "contactPhone", title: "甲端联系人电话", width: 200 },
        { field: "addressDesc", title: "甲端装机地址", width: 200 },
        { field: "zUserCustName", title: "已端用户名称", width: 200 },
        { field: "zContactName", title: "已端联系人", width: 200 },
        { field: "zContactPhone", title: "已端联系人电话", width: 200 },
        { field: "zAddressDesc", title: "已端装机地址", width: 200 },
        { field: "rate", title: "速率", width: 200 },
      ],
      salesGoodsTableData: [],
      salesGoodsTableLoading: false,
      salesGoodsTablePage: {
        pageIndex: 1,
        pageSize: 1,
        rowCount: 0,
        totalResult: 8,
      },
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  mounted() {
    this.$nextTick(function () {
      this.qryOfferInstList();
    });
  },
  // 方法集合
  methods: {
    // 业务信息tab切换
    tabTwohandleClick(tab, event) {
      
      
      if (this.activeName == "orderInfo") {
        this.projectInforTablePage.pageIndex = 1;
        this.projectInforTablePage.pageSize = 5;
        // 业务信息-订单信息-项目信息
        this.initProjectInfo();
      } else if (this.activeName == "proInstanceInfo") {
        this.qryOfferInstList();
      }
    },

    // 业务信息-产品实例信息
    async qryOfferInstList() {
      let params = {
        custId: this.$route.query.custId,
        // custId:"80",
        pageInfo: {
          pageIndex: this.proStrengthTablePage.pageIndex,
          pageSize: this.proStrengthTablePage.pageSize,
        },
      };
      const response = await CustomerInfoManageServer.qryOfferInstList(params);
      if (response.code == 200) {
        this.proStrengthTableData = response.meta.offerInsts || [];
        if (this.proStrengthTableData.length != 0) {
          this.proStrengthTableData.forEach((item) => {
            item.firstFinishDate = item.firstFinishDate
              ? this.format(item.firstFinishDate)
              : "";
            item.beginRentDate = item.beginRentDate
              ? this.format(item.beginRentDate)
              : "";
            item.stopRentDate = item.stopRentDate
              ? this.format(item.stopRentDate)
              : "";
          });
          this.proStrengthTablePage.rowCount = Number(
            response.meta.pageInfo.rowCount
          );
          this.proStrengthTablePage.totalResult = Number(
            response.meta.pageInfo.totalResult
          );
        }
      }
    },

    // 业务信息-订单信息-项目信息
    async initProjectInfo() {
      let params = {
        custId: this.$route.query.custId,
        notStatusCds: "401398",
        pageInfo: {
          pageIndex: this.projectInforTablePage.pageIndex,
          pageSize: this.projectInforTablePage.pageSize,
        },
      };
      const response = await CustomerInfoManageServer.qryCustOnLineList(params);
      
      
      this.projectInforTableData = response.meta.customerOrders;
      this.projectInforTablePage.rowCount = Number(
        response.meta.pageInfo.rowCount
      );
    },
    //业务信息-订单信息-项目信息-分页
    projectInforhHandlePageChange(val) {
      this.projectInforTablePage.pageIndex = val.currentPage;
      this.projectInforTablePage.pageSize = val.pageSize;
      // 业务信息-订单信息-项目信息
      this.initProjectInfo();
    },
    //产品实例信息  gaoyj  202105-21
    proStrengthHandlePageChange(val) {
      
      this.proStrengthTablePage.pageIndex = val.currentPage;
      this.proStrengthTablePage.pageSize = val.pageSize;
    },

    // 业务信息-订单信息-销售品信息
    async salesGoodHandel(row) {
      this.salesGoodSShow = true;
      this.orderInfoActiveName = "salesGoods";
      let params = {
        custId: this.$route.query.custId,
        custOrderId: row.custOrderId, //客户订单ID
        custSoNumber: row.custSoNumber, //流水号
        notStatusCds: "401398,101398", //订单状态
        pageInfo: {
          pageIndex: this.salesGoodsTablePage.pageIndex,
          pageSize: this.salesGoodsTablePage.pageSize,
        },
      };

      const response = await CustomerInfoManageServer.qryOrderItem(params);
      if (response.code == 200) {
        this.salesGoodsTableData = response.meta.offerOrderItems;
        this.salesGoodsTablePage.rowCount = Number(
          response.meta.pageInfo.rowCount
        );
      } else {
        alert(response.msg);
      }
    },
    // 销售品信息
    salesGoodshHandlePageChange(val) {
      
      this.salesGoodsTablePage.pageIndex = val.currentPage;
      this.salesGoodsTablePage.pageSize = val.pageSize;
      this.salesGoodHandel();
    },
    // 订单信息-tab切换
    orderInfohandleClick(tab, event) {
      if (this.orderInfoActiveName == "projectInfor") {
        this.salesGoodSShow = false;
        this.projectInforTablePage.pageIndex = 1;
        this.projectInforTablePage.pageSize = 5;
        this.initProjectInfo();
      }
    },
    //  跳转到销售品详情页面
    goToSalesDetailHandel(row) {
      window.location.href = `${process.env.VUE_APP_BASE_URL}/orders/orders.html?router=productinfo`;
    },
    //处理时间格式
    format(val) {
      if (val) {
        var y = val.substring(0, 4);
        var m = val.substring(4, 6);
        var d = val.substring(6, 8);
        return y + "-" + m + "-" + d;
      } else {
        return val;
      }
    },
  },

  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {},
  // 生命周期 - 数据挂载之前
  beforeMount() {},
  // 生命周期 - 数据更新之前
  beforeUpdate() {},
  // 生命周期 - 数据更新之后
  updated() {},
  // 生命周期 - 页面销毁之前
  beforeDestroy() {},
  // 生命周期 - 页面销毁完成
  destroyed() {},
};
</script>

<style scoped>
/* @import url(); 引入公共css类 */
.container {
  padding: 0.1rem 0.2rem;
}
.m-table {
  width: 100%;
}
</style>